<template>
  <el-container style="height: 100vh">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        某某系统
      </div>
      <div class="header-right">
        <span class="user-info">
          欢迎，{{ $this.store.user.nickname || '用户' }}
        </span>
        <el-divider direction="vertical" />
        <el-link type="primary" :underline="false" @click="handleSetting">设置</el-link>
        <el-link type="primary" :underline="false" @click="handleAbout">关于</el-link>
        <el-button type="text" @click="handleLogout" class="logout-btn">退出登录</el-button>
      </div>
    </el-header>

    <!-- 主体布局 -->
    <el-container>
      <el-aside width="200px" class="aside">
        <el-menu
            :default-active="$route.path"
            router
            background-color="#f5f5f5"
            text-color="#333"
            active-text-color="#409eff"
        >
          <el-menu-item index="/home/dashboard">仪表盘</el-menu-item>
          <el-menu-item index="/home/profile">个人中心</el-menu-item>
          <!-- 可继续添加菜单项 -->
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'
import { MessageBox, Message } from 'element-ui'

export default {
  name: 'Home',
  computed: {
    // 假设你的用户信息存在 Vuex 的 state.userInfo 中
    // 如果结构不同，请按实际路径调整，例如：state.user.userInfo
    ...mapState(['user'])
  },
  methods: {
    handleLogout() {
      MessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('logout') // 调用 logout action
        this.$router.push('/login')
        Message.success('已退出登录')
      }).catch(() => {
        // 用户取消登出
      })
    },
    handleSetting() {
      Message.info('设置功能开发中...')
      // this.$router.push('/setting')
    },
    handleAbout() {
      Message({
        message: '某某系统 v1.0.0\n基于 Vue 2 + Spring Boot 构建',
        type: 'info',
        dangerouslyUseHTMLString: true
      })
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409eff;
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  font-size: 20px;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  color: white;
  font-size: 14px;
}

.logout-btn {
  color: white !important;
  font-size: 14px;
  padding: 0;
}

.logout-btn:hover {
  color: #ffd740 !important;
}

.aside {
  border-right: 1px solid #e6e6e6;
}

:deep(.el-divider--vertical) {
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  height: 20px;
  margin: 0;
}
</style>